<template>
  <div >
    <!-- <div class="top_nav">
      <img @click="returnTap"
        class="return_icon"
        src="../../../static/images/me/leftreturn.png"
        alt=""
      />
      <span class="nav_title">生活圈</span>
      <span class="return_icon"></span>
    </div> -->
         <topNav txt="生活圈" :mode="2" ></topNav>

    <div class="top_pulish">
        <img src="../../../static/images/me/camera.jpeg" alt="" class="camere_icon" @click="showpublish">
        <img src="../../../static/images/me/headimg.png" alt="" class="headimg" @click="skiptomylife">
        <span class="name">我的世界</span>
    </div>
    <div class="concent">
        <div class="top_main">
            <img src="../../../static/images/me/headimg.png" class="main_headimg" alt="">
            <div class="main_name_title">
                <div class="main_name">小李</div>
                <div class="main_title">今天天气真好!</div>
            </div>
           
        </div>
        <div class="main">
            <div class="main_pictures">
                <div v-for="(item,index) in picList " :key="index">
                <img src="../../../static/images/me/headimg.png" class="main_pictures_lattice" alt="">
                </div>
            </div>
           <span class="main_adderss">昌江黎族自治区，昌江县</span>
           <div class="main_time_moreevent">
             <span class="main_time">2020年8月20日 9:00</span>
             <img src="../../../static/images/me/moredot.png" alt="" class="main_moredot" @click="showpicIcon">
             <div  v-if="isshowpicIcon" class="pic_icon">
          
            <van-icon name="like-o" color="#fff" />
            <span class="mag_10">赞</span>
            <div class="low"></div>
            <van-icon name="other-pay" color="#fff"/>
            <span class="mag_10">评论</span>
             </div>
           </div>
        </div>
         
    </div>
   <bottomList v-if="isshowpublish" @closemodal="closemodal" @skiptopublish="skiptopublish" :childlish="childlish"></bottomList>
  </div>
</template>
<script>
import bottomList from "@/components/bottomList.vue"
import topNav from "@/components/return"

export default{
  components:{
    bottomList,topNav
  },
    data(){
        return{
            isshowpicIcon:false,
            picList:6,
            isshowpublish:false,
            childlish:[{text:'拍摄',colorred:false,},{text:'从手机选择',colorred:false}]
        }
    },
    methods:{
        showpicIcon(){
            this.isshowpicIcon = !this.isshowpicIcon
      
        },
         returnTap(){
          this.$router.go(-1)
      },
        showpublish(){

            this.isshowpublish = !this.isshowpublish
        },
        closemodal(){
            this.showpublish()
            console.log('我出发了')
        },
        skiptopublish(){
        this.$router.push({
              path:"/publish"
          })
        },
        skiptomylife(){
            this.$router.push({
              path:"/mylife"
          })
        }
    }
}
</script>
<style  scoped>

.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
  background: #4ac7d7;
  color: #fff;
}
.return_icon {
  width: 15px;
  height: 15px;
  /* transform: rotate(180deg); */
}
.btn {
  width: 25px;
  height: 25px;
}
.top_pulish{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #5E5E5E;
    height: 150px;
    margin-bottom: 50px;
}
.camere_icon{
    width: 70px;
    height: 70px;
}
.headimg{
   position: absolute;
   right: 20px;
   bottom: -20px;
   height: 60px;
   width: 60px;
}
.name{
   position: absolute;
   right: 110px;
   bottom: 1px;
   color: #fff;
}
.top_main{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: flex-start;
    margin-left: 20px;
    margin-right: 10px;
}
.concent{
    border-bottom: 1px solid #e3e4e5;
}
.main{
    margin: 0 20px 20px 60px;
}
.main_headimg{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.main_name{
    font-size: 18px;
    font-weight: 600;
    color: #5D6F95;
    margin-bottom: 10px;
}
.main_pictures{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
.main_pictures_lattice{
    width: 80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
.main_adderss{
    font-size: 12px;
    color: #74839B;
    width: 100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.main_time_moreevent{
    position: relative;
    display: flex;
    justify-content: space-between;
}
.pic_icon{
    position: absolute;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5px;
    right: 40px;
    width: 150px;
    height: 30px;
    background: #333333;
    border-radius: 5px;
}
.pic_icon span{
    margin-left: 10px;
}
.low{
    width: 1px;
    height: 20px;
    background: #000;
    margin: 0 10px;
}
.main_moredot{
    width: 30px;
    height: 20px;
}
.main_time{
    color: #B5B5B5;
    font-size: 14px;
}
.pulish_list{

}
.icon{
    width: 20px;
    height: 20px;
}
</style>